<template>
  <view class="simple-download">
    <button @click="downloadImg">下载图片</button>
    <image :src="imgUrl" mode="widthFix" class="img" v-if="imgUrl" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ''
    };
  },
  methods: {
    downloadImg() {
      const imgSrc = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      this.imgUrl = '';

      const xhr = new XMLHttpRequest();
      xhr.open('GET', imgSrc, true);
      xhr.responseType = 'blob';
      xhr.onprogress = (e) => {
        if (e.lengthComputable) {
          const progress = Math.round((e.loaded / e.total) * 100);
          console.log('下载进度：', progress + '%');
        }
      };
      xhr.onload = () => {
        if (xhr.status === 200) {
          const blob = xhr.response;
          this.imgUrl = URL.createObjectURL(blob);
        }
      };

      xhr.send();
    }
  }
};
</script>

<style scoped>
.simple-download { padding: 30rpx; }
.img { width: 100%; margin-top: 20rpx; }
</style>